<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Simple Layout Demo</title>

	<link type="text/css" rel="stylesheet" href="layout.css" />
        <link rel='stylesheet' type='text/css' href='http://assets.getcreditable.com/1.2/css/bundled__v1.2.gz.css' />

	<style type="text/css">

	p {
		font-size:		1em;
		margin:			1ex 0;
	}
	
	/*
	 *	Rules for simulated drop-down/pop-up lists
	 */

	
	.ui-layout-north {
		/* Drop-Down */
		bottom:		auto;
		margin:		0;
		margin-top:	1.45em;
	}
        
        
        .west-north {
		/* Drop-Down */
		bottom:		auto;
		margin:		0;
		margin-top:	1.45em;
	}
        
	</style>

	<!-- LAYOUT v 1.2.0
	<script type="text/javascript" src="../lib/js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../lib/js/jquery-ui-1.7.2.js"></script>
	<script type="text/javascript" src="../lib/js/jquery.layout-1.2.0.js"></script>
	-->

	<!-- LAYOUT v 1.3.0 -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-ui.js"></script>
	<script type="text/javascript" src="jquery-layout.js"></script>
	
	<script type="text/javascript">

	var myLayout, west;

	$(document).ready(function () {

		// this layout could be created with NO OPTIONS - but showing some here just as a sample...
		// myLayout = $('body').layout(); -- syntax with No Options

		myLayout = $('body').layout({

		//	enable showOverflow on west-pane so CSS popups will overlap north pane
                       
			west__showOverflowOnHover: true
                ,       center__paneSelector:           ".ui-layout-center" 
		,	west__paneSelector:		".ui-layout-west" 
		,	south__paneSelector:		".ui-layout-south"
                ,       north__paneClass:               ".ui-layout-pane2"
                 
		//	reference only - these options are NOT required because 'true' is the default
		,	closable:				false	// pane can open & close
		,	resizable:				true	// when open, pane can be resized 
		,	slidable:				false	// when closed, pane can 'slide' open over other panes - closes on mouse-out

		//	some resizing/toggling settings
		,	north__slidable:		false	// OVERRIDE the pane-default of 'slidable=true'
		,	north__spacing_open:	0		// no resizer-bar when open (zero height)
		,	south__resizable:		false	// OVERRIDE the pane-default of 'resizable=true'
		,	south__spacing_open:	0		// no resizer-bar when open (zero height)
		,	west__spacing_open:	1		// no resizer-bar when open (zero height)
                
                //	some pane-size settings
		,	west__minSize:			100
		,	west__maxSize:			300
		
		

		
		});
	
        
        west = $('div.ui-layout-west').layout({ 
			center__paneSelector:	".west-center" 
		,	spacing_open:			0  // ALL panes
		,	closable:				false	// pane can open & close
		,	resizable:				false	// when open, pane can be resized 
		,	slidable:				false	// when closed, pane can 'slide' open over other panes - closes on mouse-out
                ,	center__size:  	200
                ,	sout__spacing_closed:	12
		}); 
        
 	});

	</script>


</head>
<body>

<!-- manually attach allowOverflow method to pane -->
<div class="ui-layout-north">
		<div id="header">
		
			<noscript>
				<div id="slider" class="slider-content slider-error">
					<h4>Creditable works best with JavaScript enabled.&nbsp;&nbsp;&nbsp;<a href="http://www.iatn.net/help/javascript/" target="_blank">Learn How</a></h4>
				</div>
			</noscript>
		
		
<div id="header-container" class="container_16">
  <div class="grid_8 alpha" style="padding: 4px 0;">
    <a class="logo png_bg" id="logo-img" href="/"></a>
  </div>
  
  
    <div id="userWrap" class="grid_8 omega">
      <div class="curved-nav user-nav">

      	<ul>
        	<li>
				<div class="user-nav-link-wrap">
					
						<a href="/users" class="floatl" style="border:none;">
							<img src='http://assets.getcreditable.com/1.2/images/user-default-16__v1.2.png' border='0' alt="trex15" class="avatar-vsm"/>
						</a>
					
					<a href="/users" class="floatl" style="border:none;padding:2px 0;">
						Profile 
					</a> 
					
						<a href="/modal/completeness" rel="facebox" class="profile-completeness"><em>(25% complete)</em></a>

					
					<a href="/profile/index">
						Settings
					</a>
					
						<a href="/modal/showinvite" rel="facebox" onClick="_gaq.push(['_trackEvent', 'Invite', 'User Menu', 'Show Invite']);">
							Invite Friends <span class="points">10</span>
						</a>
					
					<a href="/logout/index" style="border:none;">
						Logout
					</a>

				</div>
			</li>
		</ul>
      </div>
    </div>
	
		<div id="new-awards-container" class="floatr">
			<div class="floatl"><a href="/users/newaward" class="floatl marginr">You have new awards!</a><img src='http://assets.getcreditable.com/1.2/images/badges/add-credit-score-sm__v1.2.png' border='0' alt="add-credit-score" class="floatl" title="add credit score"/><img src='http://assets.getcreditable.com/1.2/images/badges/create-budget-sm__v1.2.png' border='0' alt="create-budget" class="floatl" title="create budget"/><img src='http://assets.getcreditable.com/1.2/images/badges/generate-debt-snowball-sm__v1.2.png' border='0' alt="generate-debt-snowball" class="floatl" title="generate debt snowball"/></div>
		</div>

	
  
	<div class="clearb"></div>
</div>
            
            
	</div>
      
      
      
      
      
	<div class="clear"></div>
	<div id="nav-liquid" class="png_bg">
	  <div id="topnav" class="container_16">
		<div id="nav" class="grid_16">
			<div class="wrapper">
			  
			  
			  	
					<ul id="menu">

  <li
    
      class="menu-active"
    
    >
    <a href="/overview">
	  <span></span>
		Overview
    </a>
  </li>
  <li
    
    >
    <a href="/budget">
	  <span></span>

		Budget
    </a>
  </li>
  <li
    
    >
	<a href="/challenges/index">
	  <span></span>
		Challenges
    </a>
  </li>
  <li
    
    >

    <a href="/plan/index">
	  <span></span>
		Wealth Map
    </a>
  </li>
  <li
    
    >
    <a href="/creditcards">
	  <span></span>
		Card Finder
    </a>

  </li>
  <li
    
    >
    <a href="/blog">
 	  <span></span>
		Blog
    </a>
	<span class="menu-right"></span>
  </li>
</ul>
				
			  
			</div>

		</div>
	  </div>
	</div>
	<div class="clear"></div>
	
	<div class="clear"></div>


</div>

<!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true -->
<div class="ui-layout-west">
    <div class="west-center">
        <p>-- -- </p>   
        <p>-- -- </p>   
        <p>-- -- </p>   
    
    </div> 
    <div class="ui-layout-south">Inner South</div> 
    
</div>

<div class="ui-layout-south">

	This is the south pane, closable, slidable and resizable &nbsp;
</div>

<div class="ui-layout-center">
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>

</body>
</html>